<template>
<div>

  <el-row v-if="gameOptions" class="gameClass">
    <button v-for="(item,index) in gameOptions" @click="changeGame(item.value)" :key="index" :class="selectedGame === item.value?'isGameClassBtn':''">
      {{item.label}}
    </button>
  </el-row>

  <el-row class="bread-nav">
    <ul class="bread-nav-title">
      <span>参数</span>
    </ul>
    <ul class="bread-nav-content-right">
      <button @click="changeGame('')">
        刷新
      </button>
    </ul>
  </el-row>
  <div class="content">
  <el-row>
    <table v-if="gameParameter" class="gameInfo">
      <thead>
      <tr>
        <th>
          乐透盘
        </th>
        <th>
          开盘时间
        </th>
        <th>
          封盘时间
        </th>
        <th>
          频率（秒）
        </th>
        <th>
          起始期数
        </th>
        <th>
          开奖期数
        </th>
        <th>
          等待开奖（秒）
        </th>
        <th>
          状态
        </th>
        <th>
          开盘
        </th>
        <th>
          结算
        </th>
        <th>
          开奖（系统）
        </th>
        <th>
          功能
        </th>
      </tr>
      </thead>
      <tbody>
      <tr class="gameInfo-info">
        <td>
          {{gameParameter.day.name}}
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.day.open">
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.day.close">
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.day.frequency">
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.day.startPeriod">
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.day.openPeriods">
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.day.resultSec">
        </td>
        <td>
          <img :src="gameParameter.day.status == 1 ? shineOpen : shineClose" class="light">
        <td>
          <label>
            <input type="radio" disabled v-model="kaipanAuto" value="1">自动
          </label>
          <label>
            <input type="radio" disabled v-model="kaipanAuto" value="2">手动
          </label>
          <label>
            <input type="radio" v-model="gameParameter.day.status" value="1" @change="getGameConfigForm('status', gameParameter.day.status)">开放
          </label>
          <label>
            <input type="radio" v-model="gameParameter.day.status" value="2" @change="getGameConfigForm('status', gameParameter.day.status)">维护
          </label>
        </td>
        <td>
          <label>
            <input type="radio" disabled v-model="gameParameter.day.dealMethod" :value="1">自动
          </label>
          <label>
            <input type="radio" disabled v-model="gameParameter.day.dealMethod" :value="2">手动
          </label>
        </td>
        <td>
          <label>
            <input type="radio" disabled v-model="gameParameter.day.openMethod" :value="1">自动
          </label>
          <label>
            <input type="radio" disabled v-model="gameParameter.day.openMethod" :value="2">手动
          </label>
        </td>
        <td>
          <label>
            <input type="checkbox" :value="1" @change="getGameConfigForm('checked', 1)">校对盘口
          </label>
          <label>
            <input type="radio" disabled v-model="gameParameter.day.actionMethod" :value="2">跟盘
          </label>
          <label>
            <input type="radio" disabled v-model="gameParameter.day.actionMethod" :value="3">统一开盘
          </label>
          <label>
            <input type="radio" disabled v-model="gameParameter.day.actionMethod" :value="4">自足开盘
          </label>
        </td>
      </tr>
      <tr class="gameInfo-info" v-if="gameParameter.night">
        <td>
          {{gameParameter.night.name}}
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.night.open">
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.night.close">
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.night.frequency">
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.night.startPeriod">
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.night.openPeriods">
        </td>
        <td>
          <input type="text" readonly :value="gameParameter.night.resultSec">
        </td>
        <td>
          <img :src="gameParameter.night.status == 1 ? shineOpen : shineClose" class="light">
        <td>
          <label>
            <input type="radio" disabled v-model="kaipanAuto" value="1">自动
          </label>
          <label>
            <input type="radio" disabled v-model="kaipanAuto" value="2">手动
          </label>
          <label>
            <input type="radio" v-model="gameParameter.night.status" value="1" @change="getGameConfigForm('statusN', gameParameter.night.status)">开放
          </label>
          <label>
            <input type="radio" v-model="gameParameter.night.status" value="2" @change="getGameConfigForm('statusN', gameParameter.night.status)">维护
          </label>
        </td>
        <td>
          <label>
            <input type="radio" disabled v-model="gameParameter.night.dealMethod" :value="1">自动
          </label>
          <label>
            <input type="radio" disabled v-model="gameParameter.night.dealMethod" :value="2">手动
          </label>
        </td>
        <td>
          <label>
            <input type="radio" disabled v-model="gameParameter.night.openMethod" :value="1">自动
          </label>
          <label>
            <input type="radio" disabled v-model="gameParameter.night.openMethod" :value="2">手动
          </label>
        </td>
        <td>
          <label>
            <input type="checkbox" :value="1" @change="getGameConfigForm('checkedN', 1)">校对盘口
          </label>
          <label>
            <input type="radio" disabled v-model="gameParameter.night.actionMethod" :value="2">跟盘
          </label>
          <label>
            <input type="radio" disabled v-model="gameParameter.night.actionMethod" :value="3">统一开盘
          </label>
          <label>
            <input type="radio" disabled v-model="gameParameter.night.actionMethod" :value="4">自足开盘
          </label>
        </td>
      </tr>
      </tbody>
    </table>
  </el-row>

  <el-row class="gameInfo-middle">
    <el-col :span="2" class="gameInfo-middle-title">统计</el-col>
    <el-col :span="6" class="gameInfo-middle-info">
      <label>
        <input type="checkbox" v-model="gameParameter.statistics" value="1" @change="getGameConfigForm('statistics', gameParameter.statistics)">今日输赢
      </label>
      <label>
        <input type="checkbox" v-model="gameParameter.statistics" value="2" @change="getGameConfigForm('statistics', gameParameter.statistics)">余额输赢
      </label>
    </el-col>
    <el-col :span="2" class="gameInfo-middle-title">降赔金额</el-col>
    <el-col :span="6" class="gameInfo-middle-info">
      <label>
        <input type="radio" v-model="gameParameter.odds_reduce_amount" @change="getGameConfigForm('amount', gameParameter.odds_reduce_amount)" value="1">实货
      </label>
      <label>
        <input type="radio" v-model="gameParameter.odds_reduce_amount" @change="getGameConfigForm('amount', gameParameter.odds_reduce_amount)" value="2">虚货
      </label>
    </el-col>
    <el-col :span="2" class="gameInfo-middle-title">降赔方式</el-col>
    <el-col :span="6" class="gameInfo-middle-info">
      <label>
        <input type="radio" v-model="gameParameter.odds_reduce_mode" @change="getGameConfigForm('mode', gameParameter.odds_reduce_mode)" value="1">下单后
      </label>
      <label>
        <input type="radio" v-model="gameParameter.odds_reduce_mode" @change="getGameConfigForm('mode', gameParameter.odds_reduce_mode)" value="2">下单前
      </label>
    </el-col>
  </el-row>

  <el-row class="gameInfo-footer">
    <button @click="changeGameConfig">确认</button>
    <button>取消</button>
  </el-row>
  </div>
</div>
</template>

<script>
  import { Message } from 'element-ui'
  import { mapGetters } from 'vuex'
  export default {
    name: 'parameter',
    computed: {
      ...mapGetters([
        'gameOptions', // 彩种列表
      ]),
    },
    methods: {
      getGameOptions() {
        this.$store.dispatch('GameOptionss')
          .then(() => {
            this.selectedGame = this.gameOptions[0].value
            this.getGameConfig()
          })
      },
      changeGameConfig() {
        this.$store.dispatch('SaveGameConfig', this.gameParameterForm)
          .then(response => {
            Message.success('修改参数成功!!!!')
          })
      },
      getGameConfigForm(type, value) {
        if (type === 'status') {
          this.gameParameterForm.daytime_open_status = value
        }
        if (type === 'checked') {
          this.gameParameterForm.daytime_recheck = value
        }
        if (type === 'statusN') {
          this.gameParameterForm.nighttime_open_status = value
        }
        if (type === 'checkedN') {
          this.gameParameterForm.nighttime_recheck = value
        }
        if (type === 'statistics') {
          this.gameParameterForm.statistics = value
        }
        if (type === 'amount') {
          this.gameParameterForm.odds_reduce_amount = value
        }
        if (type === 'mode') {
          this.gameParameterForm.odds_reduce_mode = value
        }
        console.log(this.gameParameterForm)
      },
      // 切换游戏
      changeGame(value) {
        if (value) {
          this.selectedGame = value
        }
        this.getGameConfig()
      },
      // 获取系统管理-参数
      getGameConfig() {
        this.$store.dispatch('GetGameConfig', { 'game': this.selectedGame })
          .then(response => {
            this.gameParameter = response
            console.log('获取系统管理--参数', response)
            this.gameParameterForm.game = this.selectedGame
            this.gameParameterForm.status = response.day.status
            this.gameParameterForm.flag = 0
            this.gameParameterForm.statistics = response.statistics
            this.gameParameterForm.odds_reduce_amount = response.odds_reduce_amount
            this.gameParameterForm.odds_reduce_mode = response.odds_reduce_mode
            this.gameParameterForm.daytime_open_method = 1
            this.gameParameterForm.daytime_open_status = response.day.status
            if (response.night) {
              this.gameParameterForm.nighttime_open_method = 1
              this.gameParameterForm.nighttime_open_status = response.night.status
            }
          })
      },
    },
    data() {
      return {
        kaipanAuto: '禁用且选中',
        gameParameter: '',
        selectedGame: '', // 当前选中的游戏
        gameParameterForm: {
          'game': '',
          'status': 0,
          'flag': 0,
          'statistics': [0],
          'odds_reduce_amount': 0,
          'odds_reduce_mode': 0,
          'daytime_open_method': 0,
          'daytime_open_status': 0,
          'nighttime_open_method': 0,
          'nighttime_open_status': 0,
          'daytime_recheck': 0,
          'nighttime_recheck': 0,
        },
        shineOpen: require('../../../../static/agent/img/shineOpen.png'),
        shineClose: require('../../../../static/agent/img/shineClose.png'),
      }
    },
    created() {
      this.getGameOptions()
    },
  }
</script>

<style scoped>
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-content{
    padding-left: 10px;
    float: left;
  }
  .bread-nav-content select{
    height:20px;
    line-height: 20px;
    margin-top: 5px;
  }
  .bread-nav-content-right{
    float: right;
    margin-right: 10px;
  }
  .bread-nav-content-right button{
    border:0;
    background-color: rgba(0, 0, 0, 0);
    color:#386399;
    font-weight: bold;
  }
  .bread-nav-content-right button:hover{
    text-decoration: underline;
  }
  .content{
    padding: 10px;
  }
  .gameInfo{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .gameInfo th{
    background: linear-gradient(to bottom, #fff 0%, #b2d1e9 100%);
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .gameInfo td{
    height: 25px;
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
  }
  .gameInfo input[type='text']{
    width:60px;
    display:inline-block;
    height:20px;
    font-weight: lighter;
    color:#000;
  }
  .gameInfo .el-radio{
    margin: 0;
  }
  .gameInfo-info:hover{
    background-color: #CAE8F6;
  }
 .gameInfo-middle{
   margin-top: 20px;
   height:30px;
   line-height: 30px;
   text-align: center;
 }
 .gameInfo-middle .el-col{
   border: 1px solid #B9C2CB;
 }
  .gameInfo-middle-title {
    background-color: #F2F2F2;
    height:100%;
    font-weight: bold;
    font-size: 14px;
    color:#131950;
  }
  .gameInfo-middle-info{
    background-color: #FFF;
    height:100%;
  }
  .gameInfo-middle-info .el-radio{
    margin: 0;
  }
  .gameInfo-middle-info .el-checkbox{
    margin: 0;
  }
  .gameInfo-footer{
    text-align: center;
    margin-top: 20px;
  }
  .gameInfo-footer button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    background: url(/static/agent/img/nav_bu.png) repeat-x left -134px;
    border: 0px;
  }
  .gameInfo-footer button:hover{
    color: #fff100;
    background: url(/static/agent/img/nav_bu.png) repeat-x left -165px;
  }

  .gameClass{
    background-color: #3f8cdc;
    padding: 0 10px;
  }
  .gameClass button{
    border:none;
    background-color: rgba(0,0,0,0);
    float: left;
    cursor: pointer;
    font-size:13px;
    color: #fff;
    height:30px;
    line-height: 30px;
    font-weight: bold;
  }
  .gameClass button:hover{
    text-decoration: underline;
    color:#fff100;
  }
  .isGameClassBtn{
    color:#fff100 !important;
  }
  .light{
    width: 20px;
    height: 20px;
    display: inline-block;
  }
</style>
